<template>
  <div class="treeParent">
    <el-tree class="treeScoped"
        :data="options"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div class="basicsBox">
          <el-select size='mini' style="width:120px;" v-model="data.fruitsValues" filterable placeholder="请选择">
            <el-option
             style="width:120px;"
              v-for="item in data.fruitsValueOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select size='mini' style="width:120px" v-model="data.sexVal" filterable placeholder="请选择">
            <el-option
              v-for="item in data.sex"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input style="width:120px"
            size="mini"
            placeholder="请输入内容"
            v-model="data.input"
            clearable>
          </el-input>
          <el-select size='mini' style="width:120px" v-model="data.hobbyVal" filterable placeholder="请选择">
            <el-option
              v-for="item in data.hobby"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" size="mini" @click="CopyCurrent(node, data,'equative')">增加同级</el-button>
          <el-button type="primary" size="mini" @click="CopyCurrent(node, data,'son')">增加子级</el-button>
          <i class="el-icon-remove-outline" @click="loseCurrent(node,data)"></i>
          <div class="radiusClass" v-show="data.isShowRadio"> 
            <el-radio v-model="data.radio" label="1">且</el-radio>
            <el-radio v-model="data.radio" label="2">或</el-radio>
          </div>
         
        </div>
      </div>
      </el-tree>
  </div>
</template>
<script>
export default {
  data(){
    return{
      id:1,
      r:"1",
      options:[
        {
            id:1,
            pid:"",
            fruitsName:"水果",
            fruitsValues:null,
            sexVal:null,
            hobbyVal:null,
            input:"245",//输入框变量
            radio:"",
            fruitsValueOptions:[
                {
                    value:"1",
                    label:"橙汁"
                },
                {
                    value:"3158",
                    label:"猕猴桃"
                }
            ],
            sex:[
                {
                    value:"1",
                    label:"男"
                },
                {
                    value:"0",
                    label:"女"
                }
            ],
            hobby:[
                  {
                    value:1,
                    label:'乒乓球'
                  },
                  {
                    value:2,
                    label:'篮球'
                  },
                  {
                    value:3,
                    label:"音乐"
                  }
            ],
        },
      ]
    }
  },
  methods: {
    //复制当前
    CopyCurrent(node, data,addRank){
      this.id++
      let newChild={
            id:this.id,
            fruitsNameId:10,
            pid:data.id,
            fruitsName:"水果",
            fruitsValues:null,
            sexVal:null,
            hobbyVal:null,
            input:"123",//输入框变量
            radio:"",
            isShowRadio:false,
            fruitsValueOptions:[
                {
                    value:"1",
                    label:"橙汁"
                },
                {
                    value:"3158",
                    label:"猕猴桃"
                }
            ],
            sex:[
                {
                    value:"1",
                    label:"男"
                },
                {
                    value:"0",
                    label:"女"
                }
            ],
            hobby:[
                  {
                    value:1,
                    label:'乒乓球'
                  },
                  {
                    value:2,
                    label:'篮球'
                  },
                  {
                    value:3,
                    label:"音乐"
                  }
            ]
        }
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        if (addRank=='son') {
          console.log('++++++++++++++++++')
          console.log(data.children.length)
          let length=data.children.length
          if (length>0) {
            data.children[length-1].isShowRadio=true;
          }
          data.children.push(newChild); 
          console.log(data)
        }else if(!node.parent.parent){//一级增加同级
          let length= this.options.length
          if (length>0) {
            this.options[length-1].isShowRadio=true;
          }
          this.options.push(newChild)
        }else{//有父亲孩子的同级
          console.log('增加有父亲的同级')
          let length=node.parent.data.children.length
          if (length>0) {
            node.parent.data.children[length-1].isShowRadio=true;
          }
          node.parent.data.children.push(newChild)
        }
    },
    loseCurrent(node,data){
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    }
  },
}
</script>
<style lang="less">
.treeScoped{
  max-width:100%;
  background:#f1f4fa;
  .el-tree-node__content{
    align-items: center;
    height: 83px;
    cursor: pointer;
  }
  .basicsBox{
    margin-left:120px;
  }
  .radiusClass{
   display:flex;
   flex-direction:column;
   font-size:10px;
   width:50px;
   position: relative;
   top: 10%;
   left:-15%

 }
}
  
 
 
</style>